<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动效果</title>
</head>

<body>
    <div id="box">
        <button id="btn">点击自动运动</button>
        <div id="block"></div>
    </div>
    <script>
        document.write("<p style='color:red;'>运动物块的左右运动，就相当于五块绝对定位的 left值的加减，上下运动就相当于 top值的加减。</p>")
        var btn = document.getElementById("btn");
        var block = document.getElementById("block");
        var long = 30;
        //在每次点击事件执行之前，先要清理定时器，避免定时器的叠加。所以需要先定义一个全局的定时器变量。
        var timer;
        var event = function () {
            var block_w = parseInt(getComputedStyle(block).left);
            var body_w = parseInt(document.body.clientWidth);
            block_w = block_w + long;
            block.style.left = block_w + 'px';
            if (block_w > (body_w - 160)) {
                long = -30;
            }
            else if (block_w <= 0) {
                long = 30;
            }
        }
        btn.onclick = function () {
            //在每次点击事件执行之前，先要清理定时器，避免定时器的叠加。
            clearInterval(timer);
            //创建一个定时器，在200ms内执行一次。
            timer = setInterval(event, 0.2 * 1000);

        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            /* width: 500px; */
            height: 600px;
        }

        #btn {
            width: 100px;
            height: 50px;
            background-color: aquamarine;
            margin: 0 auto;
            display: block;
        }

        #block {
            width: 150px;
            height: 150px;
            background-color: rgb(107, 107, 213);
            margin: 0;
            padding: 0;
            top: 100px;
            left: 100px;
            position: absolute;
        }
    </style>
</body>

</html>